<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    @keyframes spin{
        0%{
            transform: rotateX(0) rotateY(0);
        }
        100%{
            transform: rotateX(360deg) rotateY(360deg);
        }
    }
    html{
        height: 100%;
    }
    body{
    /* 渐变背景色 */
        background: radial-gradient(white,blue);
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0px;
        /* 设置3d视角距离 */
        perspective: 1000px;
        /* 自身发生变形时，保留子元素的3D表现效果 */
        
        /* transform: rotateY(30deg) rotateY(30deg); */
    }
    #box {
        width: 300PX;
        height: 300px;
        /* border:solid 4px red ; */
        position: relative;
        animation-name:spin;
        animation-duration: 5s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        transform-style: preserve-3d;
    }   
    
    .pic{
        width:300px;
        height: 300px;
        position: absolute;
        left: 0;
        top:0;
        transition: all 1s;
        box-sizing: border-box;
        border: solid 2px white;

    }
    .spic{
        width: 150px;
        height: 150px;
        position: absolute;
        left:75px;
        top:75px;
        transition: all 1s;
    }
    #s-front{
        transform: translateZ(75px);
    }
    
    #s-back{
        transform: translateZ(-75px);
    }
    #s-top{
        transform: translateY(-75px) rotateX(90deg);
    }
    #s-bottom{
        transform: translateY(75px)  rotateX(90deg);
    }
    #s-left{
        transform: translateX(-75px) rotateY(90deg);
    }
    #s-right{
        transform: translateX(75px) rotateY(90deg);
    }
    /* ------------------------------------------------- */
    #front{
        transform: translateZ(150px);
    }
    #box:hover #front{
        transform: translateZ(240px);
    }
    #back{
        transform: translateZ(-150px);
    }
    #box:hover #back{
        transform: translateZ(-240px);
    }
    #top{
        transform: translateY(-150px) rotateX(90deg);
    }
    #box:hover #top{
        transform: translateY(-240px) rotateX(90deg) ;
    }
    #bottom{
        transform: translateY(150px)  rotateX(90deg);
    }
    #box:hover #bottom{
        transform: translateY(240px) rotateX(90deg);
    }
    #left{
        transform: translateX(-150px) rotateY(90deg);
    }
    #box:hover #left{
        transform: translateX(-240px) rotateY(90deg);
    }
    #right{
        transform: translateX(150px) rotateY(90deg);
    }
    #box:hover #right{
        transform: translateX(240px) rotateY(90deg) ;
    }
</style>
<body>
    <div id="box">
        <img src="1.jpg" alt="" class="pic" id="front">
        <img src="2.jpg" alt="" class="pic" id="back">
        <img src="3.jpg" alt="" class="pic" id="top">
        <img src="4.jpg" alt="" class="pic" id="bottom">
        <img src="5.jpg" alt="" class="pic" id="left">
        <img src="6.jpg" alt="" class="pic" id="right">

        <img src="7.jpg" alt="" class="spic" id="s-front" >
        <img src="8.jpg" alt="" class="spic" id="s-back">
        <img src="9.jpg" alt="" class="spic" id="s-top">
        <img src="10.jpg" alt="" class="spic" id="s-bottom">
        <img src="11.jpg" alt="" class="spic" id="s-left">
        <img src="12.jpg" alt="" class="spic" id="s-right">
        


    </div>
<!-- img.pic[src=$.jpg]*6 -->
</body>
</html>